<template>
  <a-form layout="inline" class="filter-form">
    <a-form-item>
      <a-select
        v-model:value="currentIndex"
        style="width: 200px"
        placeholder="请选择分类"
      >
        <a-select-option
          v-for="(item, index) in currentData.list"
          :key="index"
          :value="index"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item>
      <a-select
        v-model:value="currentItem"
        style="width: 200px"
        placeholder="请选择物品"
        @change="onChange"
      >
        <a-select-option
          v-for="(item, index) in itemList"
          :key="index"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
  </a-form>
</template>

<script>
import items from "./items/index";
const currentData = items[0];

export default {
  emits: ["search"],
  data() {
    return {
      currentData,
      currentIndex: "",
      currentItem: "",
    };
  },
  computed: {
    itemList() {
      if (this.currentIndex === "") return [];
      return currentData.list[this.currentIndex].list;
    },
  },
  methods: {
    onChange(val) {
      this.$emit("search", {
        itemId: val,
      });
    },
  },
};
</script>

<style scoped>
.filter-form {
  margin-bottom: 24px;
  background: #fff;
  padding: 24px;
  border-radius: 2px;
}
</style>
